<template>
  <div
    auto-reopen="true"
    class="fixed z-50 inset-0 overflow-y-auto"
    id="headlessui-dialog-22"
    role="dialog"
    aria-modal="true"
    aria-labelledby="headlessui-dialog-title-26"
    v-show="showPayModal"
  >
    <div
      class="flex items-center justify-center min-h-screen sm:pt-4 sm:px-4 sm:pb-20 text-center sm:block sm:p-0"
    >
      <div
        id="headlessui-dialog-overlay-24"
        aria-hidden="true"
        class="fixed inset-0 bg-black bg-opacity-75 transition-opacity"
        @click="close"
      ></div>
      <span
        class="hidden sm:inline-block sm:align-middle sm:h-screen"
        aria-hidden="true"
        >​</span
      >
      <div
        class="inline-block align-middle bg-white sm:rounded-lg px-4 pt-5 pb-4 text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle w-full sm:w-full sm:p-6 sm:max-w-lg"
      >
        <div class="block absolute top-0 right-0 pt-6 pr-4">
          <button
            type="button"
            class="bg-white rounded-md text-black-70 hover:text-black focus:outline-none"
            tabindex="0"
            @click="close"
          >
            <span class="sr-only">Close</span
            ><svg
              xmlns="http://www.w3.org/2000/svg"
              fill="none"
              viewBox="0 0 24 24"
              stroke="currentColor"
              class="h-6 w-6"
            >
              <path
                stroke-linecap="round"
                stroke-linejoin="round"
                stroke-width="2"
                d="M6 18L18 6M6 6l12 12"
              ></path>
            </svg>
          </button>
        </div>
        <div>
          <div class="mt-3 text-center sm:mt-0 sm:mx-2">
            <h3
              id="headlessui-dialog-title-26"
              class="text-2xl leading-10 font-bold text-gray-900"
            >
              <!---->
              <h5 v-show="payment == 0">Recharge</h5>
              <button
                type="button"
                class="absolute left-4 top-6 bg-white rounded-md text-black-70 hover:text-black focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-yellow"
                @click="payment = 0"
              >
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  fill="none"
                  viewBox="0 0 24 24"
                  stroke="currentColor"
                  class="w-6 h-6"
                >
                  <path
                    stroke-linecap="round"
                    stroke-linejoin="round"
                    stroke-width="2"
                    d="M15 19l-7-7 7-7"
                  ></path>
                </svg>
                <span class="sr-only">Back</span>
              </button>
              <!-- <h5 v-show="payment == 1">扫码支付</h5> -->
              <!-- <h5 v-show="payment == 2">充值码</h5>
              <h5 v-show="payment == 3">促销码</h5> -->
            </h3>
            <div
              class="mt-5 max-h-[calc(100vh-110px)] sm:max-h-full overflow-auto sm:overflow-visible"
            >
              <div class="text-left" v-show="payment == 0">
                <div class="font-semibold mb-5">Please select the recharge mode</div>
                <div>
                  <div class="text-sm">
                    <!----><!----><!---->
                    <button
                      name="alipay-cxka"
                      class="w-full rounded p-5 hover:bg-gray-darkest flex space-x-2.5 cursor-pointer items-center"
                      @click="pay"
                    >
                      <img
                        src="@/assets/img/visa.png"
                        style="height:18px;"
                        alt=""
                      />
                      <h5>VISA</h5>
                    </button>
                    <!-- <button
                      name="cdk"
                      class="w-full rounded p-5 hover:bg-gray-darkest flex space-x-2.5 cursor-pointer items-center"
                      @click="payment = 2"
                    >
                      <img
                        src="https://www.lucksec.cn/img/cdk.6d0314d2.svg"
                        alt=""
                      />
                      <h5>充值码</h5></button
                    > -->
                    <!-- <button
                      name="ref-setting"
                      class="w-full rounded p-5 hover:bg-gray-darkest flex space-x-2.5 cursor-pointer items-center"
                      @click="payment = 3"
                    >
                      <img
                        src="https://www.lucksec.cn/img/refer-code.7da3c897.svg"
                        alt=""
                      />
                      <h5>促销码</h5>
                    </button> -->
                  </div>
                  <div class="text-black-70 text-sm space-x-2.5 mt-5">
                    <input
                      v-model="agree"
                      id="agreement"
                      name="agreement"
                      type="checkbox"
                      class="rounded-sm"
                    />
                    <label class="agreement-label" for="agreement">
                      I have read and agree
                      <a
                        class="text-[#2563eb]"
                        target="_blank"
                        href="https://support.lucksec.cn/hc/zh-cn/articles/4404165288857-%E7%94%A8%E6%88%B7%E5%8D%8F%E8%AE%AE"
                        >《Mall blind box&amp;Service Agreement》</a
                      >
                    </label>
                    <div class="text-red" v-show="!agree">
                      <div class="absolute left-16 text-red-500">
                        Please read and agree to the User Agreement
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <!---->
              <div class="text-left" v-show="payment == 1">
                <div class="font-semibold mb-5">Select recharge amount</div>
                <div class="mb-5 text-sm">Currency conversion: Ł 1 = ¥ 1</div>

                <div class="mb-7">
                  <div
                    id="headlessui-radiogroup-320"
                    role="radiogroup"
                    class="flex"
                  >
                    <!---->
                    <div
                      class="text-sm grid grid-cols-4 md:grid-cols-4 lg:grid-cols-4"
                      role="none"
                    >
                      <div
                        :class="[
                          'group cursor-pointer relative text-center focus:outline-none flex items-center border rounded h-10 leading-10 text-sm sm:flex-0 text-black-50 border-black-50 whitespace-nowrap px-[2px] ml-2 hover:text-[#ff7c00]',
                          {
                            'border-[#ff7c00] border-2 px-px text-[#ff7c00]':
                              cur == item.recharge_id,
                          },
                        ]"
                        id="headlessui-radiogroup-option-321"
                        role="radio"
                        aria-checked="false"
                        tabindex="0"
                        v-for="(item, index) in coinList"
                        @click="chooseCoin(item)"
                      >
                        <div
                          id="tooltip-light"
                          role="tooltip"
                          class="inline-block absolute invisible z-10 py-2 px-3 top-[-100%] left-[50%] -translate-x-1/2 text-xs font-medium text-white bg-black rounded-lg shadow-sm opacity-0 ease-in duration-100 group-hover:delay-500 tooltip group-hover:visible group-hover:opacity-100 text-xs"
                        >
                          <span>Ł{{ item.coin }}</span>
                        </div>
                        <p class="px-3">Ł{{ item.coin }}</p>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="flex items-center space-x-2.5 mb-2.5">
                  <label class="flex-shrink-0 text-sm" form="otp"
                    >recharge limit: Ł</label
                  >
                  <div class="flex-1">
                    <input
                      v-model="rechargeCoin"
                      type="number"
                      placeholder="充值额度"
                      id="otp"
                      maxlength="6"
                      min="3"
                      max="200"
                      class="appearance-none block w-full h-full px-3 py-3.5 border rounded-md focus:outline-none focus:ring-yellow focus:border-yellow sm:text-sm disabled:bg-gray-darkest disabled:text-black-50 border-gray-light"
                    />
                    <p class="text-red-500 text-sm mt-1 absolute"></p>
                    <!---->
                  </div>
                  <button
                    type="button"
                    class="rounded no-underline border flex items-center justify-center bg-yellow text-black-50 border-transparent py-2 px-3 sm:px-4 text-xs sm:text-base flex-shrink-0 w-[100px] py-3"
                    @click="recharge"
                  >
                    <div>recharge</div>
                    <!---->
                  </button>
                </div>
                <!---->
              </div>
              <!-- <div class="text-left" v-show="payment == 2">
                <div class="font-semibold mb-5">请输入充值码</div>
                <div class="flex items-center space-x-2.5 mb-2.5">
                  <label class="flex-shrink-0" form="cdk">充值码:</label>
                  <div class="flex-1 space-y-2">
                    <input
                      type="text"
                      placeholder="输入16位CDK"
                      id="cdk"
                      v-model="code"
                      maxlength="16"
                      class="appearance-none block w-full h-full px-3 py-3.5 border rounded-md focus:outline-none focus:ring-yellow focus:border-yellow sm:text-sm disabled:bg-gray-darkest disabled:text-black-50 border-gray-light"
                    />
                    <p class="text-red-500 text-sm mt-1 absolute"></p>
                  </div>
                  <button
                    type="button"
                    class="rounded no-underline border flex items-center justify-center shadow text-black-85 border-transparent hover:bg-yellow-light active:shadow-yellow py-2 px-3 sm:px-4 text-xs sm:text-base bg-variants-primary flex-shrink-0 w-[100px]"
                  >
                    <div>兑换</div>
                  </button>
                </div>
                <div class="my-7 text-sm">
                  以您需要的方式购买
                  <span class="font-semiboid">LuckSec</span>钱包卡（CDKey）。
                  通过微信支付，支付宝，银联，QQ钱包等方式。
                </div>
                <div
                  id="headlessui-radiogroup-34"
                  role="radiogroup"
                  class="flex"
                >
                  <div
                    class="text-sm grid grid-cols-4 md:grid-cols-4 lg:grid-cols-4"
                    role="none"
                  ></div>
                </div>
              </div> -->
              <!-- <div class="text-left" v-show="payment == 3">
                <div class="font-semibold mb-5">请输入促销码</div>
                <div class="flex items-center space-x-2.5 mb-2.5">
                  <label class="flex-shrink-0" form="otp">促销码:</label
                  ><input
                    type="text"
                    placeholder="促销码"
                    class="appearance-none block w-full h-full px-3 py-3.5 border rounded-md focus:outline-none focus:ring-yellow focus:border-yellow sm:text-sm disabled:bg-gray-darkest disabled:text-black-50 border-gray-light"
                  />
                  <p class="text-red-500 text-sm mt-1 absolute"></p>
                  <button
                    type="button"
                    class="rounded no-underline border flex items-center justify-center shadow text-black-85 border-transparent hover:bg-yellow-light active:shadow-yellow py-2 px-3 sm:px-4 text-xs sm:text-base bg-variants-primary flex-shrink-0 w-[100px]"
                  >
                    <div>更新</div>
                  </button>
                </div>
              </div> -->
              <div
                class="h-0 w-full border-t border-[#00000022] mb-5 mt-9"
              ></div>
              <div class="p-2 rounded-sm">
                <ul
                  class="text-xs text-black-50 list-disc leading-[18px] text-left pl-4"
                >
                  <li class="mb-1">Currency conversion: Ł 1 = ¥ 1</li>
                  <li class="mb-1">
                    <span class="text-variants-warning"
                      >Different items in the blind box game have different probabilities of obtaining, and it is not a 100% drop of a certain item. Please consume rationally and do not get addicted!</span
                    >
                  </li>
                  <li class="mb-1">At least 35 yuan recharge is required for delivery</li>
                  <li class="mb-1">
                    When using VISA payment, it may fail to purchase due to insufficient inventory and other reasons. If you actively return the goods to the system (recycle), the obtained amount will enter the LuckSec balance and will not be refunded to the original payment account. Please choose carefully!
                  </li>
                  <li class="mb-1">
                    Payment may take 5-10 minutes to arrive in the account, and <span
                      class="text-variants-warning"
                      >individuals under the age of 18 are not allowed to use this service.</span
                    >
                  </li>
                  <li class="mb-1">
                    Due to the impact of the epidemic, the arrival of goods in some areas may be delayed due to epidemic prevention and control policies. We apologize for any inconvenience caused by special times. For specific details, please consult online customer service~
                  </li>
                  <li class="mb-1">
                    Lucksec account balance cannot be withdrawn or transferred to others. Due to the restrictions of relevant laws and regulations, we do not allow refunds for balances that have been used for opening boxes or collecting through commodity resale. As long as it has not been used for any purpose, you can request a refund at any time. To avoid fees or problems, please contact us for a refund. At the same time, please be sure to choose carefully and confirm your consumption needs before recharging.
                  </li>
                  <li>
                    Contact number: (0898) 38218621, customer service QQ: 3579179004, 3165727040
                  </li>

                </ul>
              </div>
            </div>
          </div>
        </div>
        <!---->
      </div>
    </div>
  </div>
</template>
<script>
import { mapMutations, mapState } from "vuex";

export default {
  created() {
    this.$api.getRechagre().then((res) => {
      this.coinList = res.data.data;
    });
  },
  data() {
    return {
      payment: 0,
      coinList: 0,
      code: "",
      cur: 0,
      rechargeCoin: "",
      recharge_no: "",
      out_trade_no: "",
      agree: true,
    };
  },
  computed: {
    ...mapState({
      showPayModal: (state) => state.user.showPayModal,
    }),
  },
  methods: {
    ...mapMutations({
      changePayModal: "user/changePayModal",
    }),
    // 关闭窗口
    close() {
      this.changePayModal(false);
      this.payment = 0;
    },
    //支付
    pay() {
      if (this.agree) {
        this.payment = 1;
      }
    },
    //选择充值额度
    chooseCoin(item) {
      this.cur = item.recharge_id;
      this.rechargeCoin = item.coin;
      this.recharge_no = item.recharge_no;
    },
    //充值
    async recharge() {
      await this.$api
        .createOrder({
          recharge_no: this.recharge_no,
        })
        .then((res) => {
          this.out_trade_no = res.data.data.out_trade_no;
        });
      await this.$api
        .cpayRecharge({
          out_trade_no: this.out_trade_no,
        })
        .then((res) => {
          if (res.data.data) {
            window.open(res.data.data.payurl);
          } else {
            this.$notify({
              message: res.data.msg,
            });
          }
        });
    },
  },
};
</script>
<style lang="" scoped></style>
